<!DOCTYPE HTML>
<html>
    <head>
        <!-- meta -->
        <!-- meta -->
        <title>Integration with KnockoutJS</title>
        <!-- css -->
        <link href="../styles/examples.css" rel="stylesheet"/>
        <link href="../../source/styles/kendo.common.css" rel="stylesheet"/>
        <link href="../../source/styles/kendo.kendo.css" rel="stylesheet"/>
        <!-- css -->
        <!-- script -->
        <script src="../js/jquery.js"></script>
        <script src="../../source/js/kendo.core.js"></script>
        <script src="../../source/js/kendo.data.js"></script>
        <script src="../../source/js/kendo.popup.js"></script>
        <script src="../../source/js/kendo.list.js"></script>
        <script src="../../source/js/kendo.dropdownlist.js"></script>
        <script src="./jquery.tmpl.js"></script>
        <script src="./knockout-1.2.1.js"></script>
        <!-- script -->
    </head>
    <body>
        <!-- nav -->
        <!-- nav -->
        <!-- description -->
        <div class="description">This example demonstrates the seamless integration of Kendo UI DropDownList
            with <a href="http://knockoutjs.com/">KnockoutJS</a>.</div>
        <!-- description -->
        <div id="example" class="k-content">
            <p> Choose a ticket class: <select id="ticket" style="vertical-align: middle" data-bind="options: tickets,
                optionsCaption: 'Choose...',
                optionsText: 'name',
                optionsValue: 'price',
                value: chosenTicket"></select>
            </p>
            <p data-bind="template: 'ticketTemplate'"></p>

            <script id="ticketTemplate" type="text/x-jquery-tmpl">
                {{if chosenTicket}}
                You have chosen <b>${ chosenTicket().name }</b>
                ($${ chosenTicket() })
                <button data-bind="click: resetTicket">Clear</button>
                {{/if}}
            </script>
            <script>
                $(document).ready(function() {
                    var viewModel = {
                        tickets: [
                        { name: "Economy", price: 199.95 },
                        { name: "Business", price: 449.22 },
                        { name: "First Class", price: 1199.99 }
                        ],
                        chosenTicket: ko.observable(),
                        resetTicket: function() { this.chosenTicket(null) }
                    };

                    ko.applyBindings(viewModel);

                    $("#ticket").kendoDropDownList();
                });
            </script>
        </div>
        <!-- tools -->
        <!-- tools -->
    </body>
</html>
